<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- 使用v-show=后面跟表达式或6大假值做条件渲染 -->
			<h2 v-show="undefined">欢迎来到{{school}}</h2>
			<!-- <h2 v-show="1 === 1">欢迎来到{{school}}</h2> -->
			<!-- 或者让表达式等于1个变量，当我们修改变量的值，就可以控制对象的显示和隐藏 -->
			<!-- <h2 v-show="a">欢迎来到{{school}}</h2> -->
			
			
			<!-- 对比v-if使用 
			1.同样能够显示或隐藏节点，但是if会彻底清除节点对象 -->
			<h2 v-if="1 === 2">欢迎来到{{school}}</h2>
			
			<h2 >num:{{num}}</h2>
			<button @click='num++'>点我数字num++</button>
			<h2>本班人员</h2>
		<!-- 	<h3 v-if='num==1'>小红</h3>
			<h3 v-if='num==2'>小白</h3>
			<h3 v-if='num==3'>小黑</h3> -->
			<!-- 此处对比 v-else-if-->
			<!-- <h3 v-if='num==1'>小红</h3>
			<h3 v-else-if='num==1'>小白</h3>
			<h3 v-else-if='num==3'>小黑</h3> -->
			<!-- 此处注意if 与else if是成组出现，中间不可间断 v-else不需要写条件 -->
			<!-- <h3 v-if='num==1'>小红</h3>
			<h3 v-if='num==1'>小白</h3>
			<h3 v-if='num==1'>小黑</h3> -->
			<!-- template不会改变文档结构，且只能与v-if搭配使用 -->
			<template v-if='num==1'>
				<h3>小红</h3>
				<h3 >小白</h3>
				<h3>小黑</h3>
			</template>
			
		</div>
		<script>
			Vue.config.productionTip=false;
			const vm = new Vue({
				el: "#box",
				data: {
					school:"宜春职业技术学院",
					num:0
					
				}
			})
		</script>
	</body>
</html>